import VueRouter from "vue-router";
import Home from '../com/home.vue'
import one from '../com/one.vue'
import Vue from 'vue'
Vue.use(VueRouter)
// import about from './com/about'
//  VueRouter 路由器
const routes = new VueRouter({
    mode: 'history',
    // routes 路由
    routes: [
        {
            path: '/',
            name: 'about',
            component: () =>
                import('../com/about.vue'),
            beforeEnter: (to, from, next) => {
                let data = localStorage.getItem('ID')
                if (data) {
                    console.log(222, to);
                    if (to.name == 'about') {
                        next({ name: 'home' })
                    } else {
                        next(false)
                    }
                } else {
                    if (to.name != 'about') {
                        next({ name: 'about' })
                    } else {
                        next()
                    }
                }
            }
            // 重定向  已经进入页面就展示所需要展示的内容
            // redirect: { name: 'about' },
            // redirect: { name: 'indexto' },
        },
        {
            // 路由跳转的路线，自己命名
            path: '/home',
            // 命名路由
            name: 'home',
            // 路由跳转的组件，2种写法
            components: {
                // 命名视图，在那个路由组件里写，带入组件内容就在那个路由页面里显示，但是占位符要写在App.vue里面
                default: Home,
                // 这个需要将组件应用进来
                a: one,
                // 这个可以直接调用
                b: () => import('../com/two.vue')
            },
            meta: {
                title: 'home',
                istrue: true
            },
            redirect: { name: 'indexto' },
            children: [
                {
                    path: '/user',
                    component: () =>
                        import('../com/user.vue'),
                    name: 'user',
                    children: [{
                        path: '/user1',
                        component: () =>
                            import('../com/user1.vue'),
                        name: 'user1',
                    },]
                },
                {
                    path: '/shop',
                    component: () =>
                        import('../com/shop.vue'),
                    name: 'shop'

                },
                // 首页
                {
                    path: '/indexto',
                    component: () => import('../com/indexto.vue'),
                    name: 'indexto',
                    // 图表
                    children: [
                        {
                            path: '/bar',
                            component: () => import('../com/bar.vue'),
                            name: 'bar'
                        }
                    ]
                },
                // 用户管理
                {
                    path: '/usermanager',
                    component: () => import('../com/usermanager.vue'),
                    name: 'usermanager'
                },
                // 商品管理
                {
                    path: '/shopmanager',
                    component: () => import('../com/shopmanager.vue'),
                    name: 'shopmanager'
                },
                {
                    path: '/one',
                    component: () => import('../com/one.vue'),
                    name: 'one'
                },
                {
                    path: '/two',
                    component: () => import('../com/two.vue'),
                    name: 'two'
                }
            ],
            // beforeEnter: (to, from, next) => {
            //     let data = localStorage.getItem('ID')
            //     console.log(data, '999');
            //     if (data) {
            //         if (to.name == 'home') {
            //             next({ name: 'home' })
            //         } else {
            //             next()
            //         }
            //     } else {
            //         if (to.name != 'home') {
            //             next({ name: 'about' })
            //         } else {
            //             next()
            //         }
            //     }
            // }
        },
        {
            path: '/about',
            component: () => import('../com/about.vue'),
            name: 'about',
            // 路由独享守卫

        },
    ]
})
// 路由守卫
// 第一个  前置守卫
// routes.beforeEach((to, from, next) => {
//     // 即将要进入的目标路由对象
//     console.log('to', to);
//     // 当前导航正要离开的路由
//     console.log('from', from);
//     console.log('next', next);
//     if (to.meta.isAuto === true) {
//         next({ name: 'home' })
//     } else {
//         next(false)
//     }
// // 放行 走自己的路
// next()
// // 不放行 
// next(false)
// // 放行到你指定的路
// next({name:'',path:''})
// })


// 导出路由
export default routes